Pre Production
Deliverables: Background video for the landing page, feature graphic for app store and graphic elements for app UX.
The objective was to create a TV app for Uninterrupted that would be released to platforms Amazon FireTV, Apple TV, Roku, Sony and Microsoft. After getting to know the brand by visiting Uninterrupted's website and familiarizing myself with it's contents, I got to work.
Uninterrupted has a slick, clean and simple design with a minimal colors and basic shapes. The typography, colors and overall aesthetic is constant through each touchpoint. The elements I observed and took note of was their use of sans serif white type on black background with an occasional single red horizontal line leading to pieces of information. The content display itself is very attractive: because Uninterrupted has a simple brand it allows the beautifully and artistically photographed/edited content posters to shine. This drawn the users attention to the content and its appeal. I decided to use this as the focal point of my design.
For the landing page video, the idea was simple: I would create a 3D version of Uninterrupted's logo to match our company brand (Direct Sports Network) and keep some subtle consistency with our other Sports Network apps. Behind the fixed 3D logo, I will create and place a collage of a selection of the beautiful content posters from Uninterrupted. This poster is about two thirds longer than the video enclosing box so that I can animate it slowly shifting to the left. Each poster image will fade into a different poster image. There are two reasons for this solution; the first is that it will create a near seamless loop, the second is to show more of the content offered to create a feeling of content quantity as well as quality.
This is a mockup created in photoshop. Once I had the approval of the CEO, I began production.
Production Work
The first step was to import Uninterrupted's logo into Cinema 4D and create a three dimensional version of it.
The next step was to create a collage of some of the content posters found on Uninterrupted's website. I created two versions of this poster so that I may fade between them in After effects and reveal different posters during the animation.
Once the assets were complete, I imported them into After Effects and began animating. The Logo was fixed in the center and I added two horizontal red lines; one leading to the Icon and the other to the wordmark underneath it in order to echo the red lines present on the website.
I imported two collages and set up the key frames to fade from one to the other as the animation progressed. The motion was slow but visible in order to create a dynamic and organic feeling of three dimensional space.
The final product (outside of the app)
One the Landing Page was complete, I echoed the same aesthetic for our Feature Graphic the appears behind the description in the app store. Using the same posters from Uninterrupted, I created a slanted collage.
Below is a screenshot of the Feature Graphic in the context of the app store.
The individual channels within the app were more simple: Clean banner images featuring players and content subjects. The names were placed on the right in a sans serif white font with a red horizontal line coming in from the right to indicate it.
The individual tiles for the content are simply low opacity edited images of the topics of each episode with the title in the lower right hand corner with the same type used in the banner.
